import React from 'react'
import './index.css'
export default function Footer({ todoList, setTodoList }) {
    const checkAllHandle = (e) => {
        const newTodoList =todoList.map(item => {
            return { ...item, done: e.target.checked }
        })
        setTodoList(newTodoList)
    }
    const deleteHandle=()=>{
       const newTodoList=todoList.filter(item=>!item.done)
       setTodoList(newTodoList)
    }
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" onChange={checkAllHandle} checked={todoList.reduce((p, c) => c.done ? p + 1 : p, 0) === todoList.length && todoList.length !== 0} />
            </label>
            <span>
                <span>已完成{todoList.reduce((p, c) => c.done ? p + 1 : p, 0)}</span> / 全部{todoList.length}
            </span>
            <button onClick={deleteHandle} className="btn btn-danger">清除已完成任务</button>
        </div>
    )
}
